<script setup>
import { ref, watch, onMounted, onUnmounted, reactive } from 'vue'
import FlyInfo from './fly-info.vue'
import FlyData from './fly-data.vue'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import AirAnimation from '@/views/operation/js/airAnimation.js'
import { addCultureAirSpace, clearCultureAirSpace } from '../js/culture'
import {
  addObjMove,
  clear,
  addCusObjectDa,
  cusObjectDaMove,
  addLine,
  ppList,
  pList,
  peopleList,
  enList,
  sList,
  updateMarkerText
} from './js/addObjMove'
import { useFlyNumStore } from '@/stores/modules/flynum'
const flyNumStore = useFlyNumStore()
const airAnimation = new AirAnimation()
const airStore = useAirStore()
const { FocusAirId, AirFlight } = storeToRefs(airStore)
const navBar = ref('运营概况')
const navList = ref(['运营概况', '飞行概况'])

const changeNav = (item) => {
  if (item == '飞行概况') {
    if (!FocusAirId.value) {
      return ElMessage.warning('请先选择直升机')
    }
  } else {
    __g.customObject.focus('air-' + FocusAirId.value, 2000)
    FocusAirId.value = ''
    __g.marker.showByGroupId('wrjMarker')
    airAnimation.clerpolyline()
  }
  navBar.value = item
}

onMounted(() => {
  addCultureAirSpace()
  // 添加大梅沙飞行器
  addObjMove()
})

onUnmounted(() => {
  clearCultureAirSpace()
  clear()
})

watch(FocusAirId, (newVal) => {
  if (newVal) {
    navBar.value = '飞行概况'
  } else {
    navBar.value = '运营概况'
  }
})

const state = reactive({
  isFrst1: true,
  isFrst2: false,
  isFrst3: false
})
const changState = (index) => {
  updateMarkerText()
  switch (index) {
    case 0:
      state.isFrst1 = !state.isFrst1
      state.isFrst2 = false
      state.isFrst3 = false

      __g.customObject.delete(['滑翔伞1', '滑翔伞1', '直升机1', '直升机2'])
      __g.marker.deleteByGroupId('HuaObjectDaMarker')
      __g.marker.deleteByGroupId('CusObjectDaMarker')
      __g.polyline.delete(['直升机1', '直升机2'])
      if (state.isFrst1) {
        // 大梅沙
        addCusObjectDa(ppList)
        cusObjectDaMove(ppList, 15)
        addLine(ppList, [0, 1, 1, 1])

        // 恩上
        addCusObjectDa(enList)
        cusObjectDaMove(enList, 40)
        addLine(enList, [0, 1, 1, 1])
      } else {
        __g.customObject.delete(['evtol1', 'evtol2'])
        __g.marker.deleteByGroupId('EvtolObjectDaMarker')
        __g.polyline.delete(['evtol1', 'evtol2'])
      }
      break
    case 1:
      state.isFrst2 = !state.isFrst2
      state.isFrst1 = false
      state.isFrst3 = false
      __g.marker.deleteByGroupId('EvtolObjectDaMarker')
      __g.polyline.delete(['evtol1', 'evtol2', '直升机1', '直升机2'])
      __g.customObject.delete(['直升机1', '直升机2', 'evtol1', 'evtol2'])
      __g.marker.deleteByGroupId('CusObjectDaMarker')
      if (state.isFrst2) {
        addCusObjectDa(pList)
        cusObjectDaMove(pList, 40)
      } else {
        __g.customObject.delete(['滑翔伞1', '滑翔伞1'])
        __g.marker.deleteByGroupId('HuaObjectDaMarker')
      }
      break
    case 2:
      state.isFrst3 = !state.isFrst3
      state.isFrst2 = false
      state.isFrst1 = false
      __g.customObject.delete(['evtol1', 'evtol2', '滑翔伞1', '滑翔伞1'])
      __g.marker.deleteByGroupId('EvtolObjectDaMarker')
      __g.polyline.delete(['evtol1', 'evtol2'])
      __g.marker.deleteByGroupId('HuaObjectDaMarker')
      if (state.isFrst3) {
        addCusObjectDa(peopleList)
        cusObjectDaMove(peopleList, 40)
        addLine(peopleList, [1, 0, 1, 1])

        addCusObjectDa(sList)
        cusObjectDaMove(sList, 40)
        addLine(sList, [1, 0, 1, 1])
      } else {
        __g.customObject.delete(['直升机1', '直升机2'])
        __g.marker.deleteByGroupId('CusObjectDaMarker')
        __g.polyline.delete(['直升机1', '直升机2'])
      }
  }

  if (state.isFrst1 === true && state.isFrst2 === false && state.isFrst3 === false) {
    flyNumStore.setFlyNum({
      daNum: '1',
      dongNum: '0',
      enNum: '1'
    })

    flyNumStore.setFlyType({
      evtol: '2',
      zhi: '0',
      hua: '0'
    })
  } else if (state.isFrst1 === false && state.isFrst2 === true && state.isFrst3 === false) {
    flyNumStore.setFlyNum({
      daNum: '2',
      dongNum: '0',
      enNum: '0'
    })
    flyNumStore.setFlyType({
      evtol: '0',
      zhi: '0',
      hua: '2'
    })
  } else if (state.isFrst1 === false && state.isFrst2 === false && state.isFrst3 === true) {
    flyNumStore.setFlyNum({
      daNum: '1',
      dongNum: '1',
      enNum: '0'
    })
    flyNumStore.setFlyType({
      evtol: '0',
      zhi: '2',
      hua: '0'
    })
  } else if (state.isFrst1 === true && state.isFrst2 === true && state.isFrst3 === false) {
    flyNumStore.setFlyNum({
      daNum: '3',
      dongNum: '0',
      enNum: '1'
    })
    flyNumStore.setFlyType({
      evtol: '2',
      zhi: '0',
      hua: '2'
    })
  } else if (state.isFrst1 === true && state.isFrst2 === false && state.isFrst3 === true) {
    flyNumStore.setFlyNum({
      daNum: '2',
      dongNum: '1',
      enNum: '1'
    })
    flyNumStore.setFlyType({
      evtol: '2',
      zhi: '2',
      hua: '0'
    })
  } else if (state.isFrst1 === false && state.isFrst2 === true && state.isFrst3 === true) {
    flyNumStore.setFlyNum({
      daNum: '3',
      dongNum: '1',
      enNum: '0'
    })
    flyNumStore.setFlyType({
      evtol: '0',
      zhi: '2',
      hua: '2'
    })
  } else if (state.isFrst1 === true && state.isFrst2 === true && state.isFrst3 === true) {
    flyNumStore.setFlyNum({
      daNum: '4',
      dongNum: '1',
      enNum: '1'
    })
    flyNumStore.setFlyType({
      evtol: '2',
      zhi: '2',
      hua: '2'
    })
  } else {
    flyNumStore.setFlyNum({
      daNum: '0',
      dongNum: '0',
      enNum: '0'
    })
    flyNumStore.setFlyType({
      evtol: '0',
      zhi: '0',
      hua: '0'
    })
  }
}
</script>
<template>
  <RightBox>
    <div class="card">
      <div class="conbox">
        <div class="navbox">
          <p
            v-for="(item, index) in navList"
            :key="index"
            :class="{ active: navBar === item }"
            @click="changeNav(item)"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <FlyData v-if="navBar === '运营概况'"></FlyData>
      <FlyInfo v-if="navBar === '飞行概况'"></FlyInfo>
    </div>
  </RightBox>
  <div class="chebianlian">
    <div class="item" @click="changState(0)">
      <img v-if="state.isFrst1" src="@img/management/open.png" alt="" />
      <img v-else src="@img/management/close.png" alt="" />
      <span>eVTOL</span>
    </div>
    <div class="item" @click="changState(1)">
      <img v-if="state.isFrst2" src="@img/management/open.png" alt="" />
      <img v-else src="@img/management/close.png" alt="" />
      <span>滑翔伞</span>
    </div>
    <div class="item" @click="changState(2)">
      <img v-if="state.isFrst3" src="@img/management/open.png" alt="" />
      <img v-else src="@img/management/close.png" alt="" />
      <span>直升机</span>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .conbox {
    padding: 2px 15px 10px;
    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0 10px;
        font-size: 15px;
        opacity: 0.7;
        text-align: center;
        cursor: pointer;
        background: left bottom url('@img/overview/navbar.png') no-repeat;
        background-size: 100% 3px;

        &.active {
          opacity: 1;
          position: relative;
          background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
          background-size: 120% 20px;

          &::before {
            position: absolute;
            top: 15px;
            left: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_left.png');
            background-size: 100% 100%;
          }

          &::after {
            position: absolute;
            top: 15px;
            right: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_right.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}

.chebianlian {
  background: url('@/assets/images/img/矩形@2x.png') no-repeat;
  background-size: 100% 100%;
  width: 120px;
  height: 100px;
  position: absolute;
  right: 400px;
  bottom: 100px;
  z-index: 999999;
  padding: 10px;
  .item {
    color: #fff;
    margin-top: 10px;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 15px;
      margin-right: 10px;
    }
    &:first-child {
      margin-top: 0;
    }
  }
}
</style>
